<template>
  <div class="inline">
    <el-select v-if="showGameId" v-model="searchForm.gameId" placeholder="选择游戏" class="filter-item" @change="getChannelList(searchForm)">
      <el-option
        v-for="item in gameList"
        :key="item.id"
        :label="item.title"
        :value="item.id"
      />
    </el-select>
    <!-- <el-select v-if="showChannelId" v-model="searchForm.channelId" class="filter-item" clearable multiple filterable placeholder="选择渠道">
      <el-option
        v-for="item in channelList"
        :key="item.channel_id"
        :label="item.channel_id"
        :value="item.channel_id"
      />
    </el-select> -->
    <el-button v-if="showChannelButton" class="filter-item" type="info" @click="openChannelList">渠道列表</el-button>
    <el-button v-if="showButton" class="filter-item" type="primary" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
    <div class="range-group">
      <div class="pre">
        <p v-if="searchForm.channelId.length > 0">平台范围：{{ searchForm.channelId.join('，') }}</p>
        <p v-else>平台范围：全部</p>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" :title="'服务器列表'" :close-on-click-modal="false">
      <el-card class="channel-card mb-30">
        <div slot="header" class="clearfix">
          <span>渠道列表</span>
          <div class="fr">
            <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
          </div>
        </div>
        <div class="body">
          <div v-for="(item, index) in allData" :key="index">
            <el-checkbox
              v-model="item.checkAll"
              style="margin-left: 30px"
              :indeterminate="item.isIndeterminate"
              @change="checkTitle(index)"
            >{{ item.versionName }}</el-checkbox>
            <el-checkbox-group
              v-model="searchForm.channelId"
              @change="checkItem(searchForm.channelId, index)"
            >
              <el-checkbox
                v-for="row in item.channels"
                :key="row.id"
                :label="row.id"
              >{{ row | channelFilter }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>

import { getAllSortsChannel } from '@/api/ops'
import { set } from 'nprogress'

export default {
  filters: {
    channelFilter(row, length = 3) {
      return (Array(length).join('0') + row.id).slice(-length) + ' | ' + row.name + ' | ' + row.title
    }
  },
  props: {
    showGameId: { type: Boolean, default: false },
    showChannelId: { type: Boolean, default: false },
    showChannelButton: { type: Boolean, default: true },
    showButton: { type: Boolean, default: true }
  },
  data() {
    return {
      loading: false,
      searchForm: {
        gameId: this.$store.state.user.gameId,
        channelId: []
      },
      channelList: [],
      dialogVisible: false,
      isIndeterminate: true,
      checkAll: false,
      list: [],
      allData: [],
      searchActive: 'versionName'
    }
  },
  computed: {
    gameList() {
      return this.$store.state.user.games
    }
  },
  created() {
    this.getChannelList()
  },
  methods: {
    async getChannelList() {
      const res = await getAllSortsChannel()
      this.allData = res.data[this.searchForm.gameId]
      console.log(this.allData)
    },
    handleFilter() {
      this.$emit('transferFilter', this.searchForm)
    },
    openChannelList() {
      this.list = this.allData
      this.dialogVisible = true
    },
    handleCheckAllChange(val) { // 处理全选事件
      // console.log(val)
      this.checkAll = val
      this.isIndeterminate = false
      for (var i = 0, len = this.allData.length; i < len; i++) { // 二级全选反选
        this.allData[i].checkAll = val
        this.allData[i].isIndeterminate = false
      }
      if (val) {
        const channelList1 = this.allData[0].channels.map(item => item.id)
        const channelList2 = this.allData[1].channels.map(item => item.id)
        const channelList3 = this.allData[2].channels.map(item => item.id)
        channelList1.forEach((item, i) => {
          this.searchForm.channelId.push(item)
          if (channelList2[i]) this.searchForm.channelId.push(channelList2[i])
          if (channelList3[i]) this.searchForm.channelId.push(channelList3[i])
        })
      } else {
        this.searchForm.channelId = []
      }
    },
    checkTitle(index) { // 二级change事件
      if (this.allData[index].checkAll == false) {
        this.allData[index].isIndeterminate = false
        const channelList = this.allData[index].channels
        if (channelList) {
          const len = channelList.length
          this.searchForm.channelId = this.unique(this.searchForm.channelId)
          for (var i = 0; i < len; i++) {
            channelList[i].checked = false
            const index = this.searchForm.channelId.indexOf(channelList[i].id)
            this.searchForm.channelId.splice(index, 1)
          }
        }
      } else if (this.allData[index].checkAll == true) {
        this.allData[index].isIndeterminate = false
        const channelList = this.allData[index].channels
        if (channelList) {
          const len = channelList.length
          for (var i = 0; i < len; i++) {
            channelList[i].checked = true
            this.searchForm.channelId.push(channelList[i].id)
          }
        }

        this.searchForm.channelId = this.unique(this.searchForm.channelId)
      }
      if (this.allData[0].checkAll === true && this.allData[1].checkAll === true && this.allData[2].checkAll === true) {
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate = true
      }
      // console.log(this.searchForm.channelId)
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },
    checkItem(val, index) {
      const checkedCount = val.length
      this.allData[index].checkAll = checkedCount === this.allData[index].channels.length
      this.allData[index].isIndeterminate = checkedCount > 0 && checkedCount < this.allData[index].channels.length
      if (checkedCount === (this.allData[0].channels.length + this.allData[1].channels.length + this.allData[2].channels.length)) {
        this.checkAll = true
        this.isIndeterminate = false
      } else {
        this.checkAll = false
        this.isIndeterminate = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.channel-card {
  .body {
    max-height: 650px;
    overflow: auto;
  }
  .platform {
    width: 300px;
    margin-right: 5px;
  }
}
</style>
